<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0, 0, 0, .3);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div class="mask"></div>
<div class="main">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque nam veniam voluptates! Doloremque perspiciatis,
        quia? Enim fugiat qui quisquam! Aliquid commodi cumque cupiditate earum excepturi provident quas quod, velit?
        Magnam?
    </div>
    <div>Aspernatur ea et facilis maiores, nisi provident soluta. Ad aperiam cum cupiditate deserunt dicta dignissimos
        dolore, dolores dolorum inventore ipsam molestiae odit, porro quas quo quos, ratione reiciendis veritatis.
        Consectetur?
    </div>
    <div>Accusamus assumenda consectetur doloremque earum est ex explicabo fugit officiis quas, quod repellendus sunt
        vel voluptates. Assumenda, ea eos esse excepturi laboriosam minus pariatur possimus quae sunt ut. Culpa, soluta!
    </div>
    <div>Asperiores cumque dignissimos illo laudantium, officiis quae quisquam. Accusantium ad aspernatur beatae
        delectus dolore, dolores eligendi exercitationem in libero nihil qui quod saepe, sint sunt totam? Ipsum
        molestias nostrum sapiente.
    </div>
    <div>Animi consectetur consequatur consequuntur magnam tempora. Dicta ea earum esse excepturi facere laudantium
        magnam mollitia officia optio perspiciatis, quidem, repellendus vitae voluptas. Consequatur cumque deleniti
        error perferendis rem, tenetur veritatis.
    </div>
    <div>Delectus dicta, labore nemo odit optio rem repellendus similique sit. Ab aperiam assumenda cumque eum facilis
        incidunt ipsa magni maiores maxime molestias, officia quidem, quos vel! Debitis delectus doloremque suscipit?
    </div>
    <div>Accusamus amet aperiam asperiores assumenda aut blanditiis debitis eius eos esse explicabo harum iure iusto
        laboriosam libero maxime minima neque nobis placeat quae quasi quidem ratione rem repellat tempora, tempore.
    </div>
    <div>Aperiam delectus libero optio perspiciatis tempore. Aliquid animi nulla obcaecati possimus veritatis! Assumenda
        beatae earum reprehenderit veniam vitae! Culpa debitis deleniti earum, eligendi laborum minima necessitatibus
        provident repellat tempora tempore!
    </div>
    <div>Ab architecto corporis expedita quam soluta. Ad assumenda deleniti ducimus fugiat ipsam magnam obcaecati quam.
        Assumenda debitis ex expedita ipsa, laborum natus nemo numquam odio quaerat quas tempora velit vitae.
    </div>
    <div>A alias architecto atque corporis dolorem eligendi error esse, expedita id ipsa libero magni maxime molestiae
        nobis non numquam perspiciatis qui quo quos rem sed sit, soluta ullam? Enim, quam!
    </div>
    <div>Assumenda et eum id in iste omnis! Doloremque eos facilis ipsa iste quod reprehenderit velit vitae. Deleniti
        error impedit laboriosam modi non praesentium quos sint, ut? Blanditiis magni maxime nisi?
    </div>
    <div>Eum ex, excepturi maiores molestiae sed unde! Culpa laborum odio saepe? At dolore eligendi, esse eum facilis
        fuga ipsam laboriosam vitae voluptatibus? Ad aperiam cum fuga, ipsum iusto necessitatibus porro?
    </div>
    <div>Aliquid animi aperiam cumque ea eius enim eos, est eveniet exercitationem fuga ipsam laboriosam maiores neque
        perferendis perspiciatis, porro quia quisquam repellendus rerum sit, sunt tempore totam ullam. Voluptate,
        voluptates?
    </div>
    <div>Aliquam commodi consequuntur cumque debitis eveniet exercitationem harum iste maiores maxime, quasi qui sunt
        voluptatem. Cupiditate explicabo facere fuga illum labore laudantium nihil repellat sed similique sint. Odio,
        quibusdam, sed.
    </div>
    <div>Aliquam blanditiis consectetur culpa cumque dicta dignissimos, dolorem dolores, eligendi error est ex
        excepturi, exercitationem expedita fugiat id neque omnis perferendis porro possimus repellat similique tenetur
        ullam vero vitae voluptate.
    </div>
    <div>Asperiores doloribus eius eligendi fuga necessitatibus obcaecati recusandae! Accusamus adipisci aspernatur
        blanditiis commodi debitis esse et ipsam ipsum iure natus numquam obcaecati, omnis pariatur perspiciatis quia,
        similique sunt totam voluptatem.
    </div>
    <div>Adipisci amet aspernatur beatae consequatur deleniti doloremque eveniet explicabo, id ipsa iusto mollitia nam
        numquam pariatur placeat porro praesentium, quam quia quidem rem reprehenderit saepe temporibus voluptates! Aut,
        corporis, sint.
    </div>
    <div>Aliquam aspernatur corporis dignissimos, distinctio eligendi minima nostrum repellendus tempora! Atque autem
        delectus dignissimos doloribus dolorum esse facere impedit, iste nam odit provident, quaerat quo reiciendis
        saepe velit veniam veritatis.
    </div>
    <div>Alias blanditiis eligendi fuga impedit in, magnam provident quam veritatis. Delectus impedit iusto nobis non
        placeat quasi, quod repellat soluta. A, ab accusamus debitis dolor dolorem impedit ipsum veritatis? Illum.
    </div>
    <div>Ad assumenda blanditiis consectetur delectus dolore esse facilis fuga incidunt ipsum iusto labore, magni modi
        quidem saepe sapiente temporibus voluptas! Ab ad animi cum deleniti est inventore nihil nostrum sequi?
    </div>
    <div>Ad adipisci assumenda corporis culpa cumque doloribus enim error exercitationem, explicabo facilis harum in
        ipsum libero modi, necessitatibus neque, nesciunt nisi omnis porro provident quo similique tempora tenetur totam
        vero.
    </div>
    <div>Adipisci aperiam at aut culpa cum, cumque dicta dolorum eos et eveniet expedita fuga fugit minima neque nihil,
        odio praesentium qui quia quos ratione tempora totam vel veniam veritatis vitae.
    </div>
    <div>Ad aliquam autem ex explicabo omnis quod recusandae repellendus voluptatum? Accusamus consectetur deleniti,
        dolore enim error illum, laudantium libero maiores molestias quia saepe vel. Aut autem esse nam optio vitae!
    </div>
    <div>Commodi exercitationem fuga fugit itaque maxime minima molestias neque, odio porro quo. At ducimus ipsa iure
        optio perferendis placeat, quaerat quam qui quisquam veritatis voluptas voluptatem. Enim nisi praesentium
        quibusdam.
    </div>
    <div>Accusamus amet autem consectetur delectus ducimus eos, expedita incidunt non, quasi quo, tenetur voluptatibus.
        Ab aut blanditiis eaque enim laborum nostrum perspiciatis sunt. Alias corporis deserunt expedita itaque nobis
        nostrum!
    </div>
    <div>Adipisci aliquid architecto aspernatur, autem blanditiis cum debitis, earum enim facere fugit libero magnam
        nostrum omnis qui quis rerum, sit suscipit tempora vero voluptatibus. Aliquid dignissimos earum expedita itaque
        sed.
    </div>
    <div>Accusamus, amet at corporis dignissimos dolorum ducimus fugiat id incidunt inventore labore maxime molestias
        praesentium quasi quod quos repellat ullam voluptatibus. Autem deleniti ducimus itaque, modi nam possimus quasi
        totam.
    </div>
    <div>Animi aspernatur blanditiis corporis deleniti deserunt dicta ea eius eos eveniet ex explicabo harum illo magnam
        modi molestias nisi numquam praesentium, quaerat quas quisquam, quo recusandae reiciendis rem repudiandae
        tempora.
    </div>
    <div>Ad, hic id itaque modi natus officiis perferendis repellat vero. Aliquid animi et iste laboriosam porro quidem
        sapiente. Aperiam commodi earum facere iste omnis, placeat porro quo soluta tenetur totam.
    </div>
    <div>A amet atque cumque debitis eos expedita fugiat id illo obcaecati repudiandae sapiente sequi, suscipit totam ut
        voluptatibus! Assumenda ex inventore minima obcaecati officia porro praesentium quia repellendus ullam
        voluptate.
    </div>
    <div>Animi aspernatur assumenda aut fugit praesentium. Aliquid animi corporis error, et hic id, ipsa laudantium
        maxime mollitia quos sequi soluta veritatis. Aliquam at commodi cum error exercitationem fugiat, itaque
        repudiandae!
    </div>
    <div>A, alias consectetur consequuntur distinctio eum explicabo facere iure quae quibusdam similique! Ad, aliquid
        architecto assumenda blanditiis, distinctio dolores ducimus eum eveniet excepturi impedit ipsum laboriosam
        maxime quae saepe voluptates!
    </div>
    <div>Accusantium atque consectetur dolorem ducimus error, est facilis fugiat id illo illum iste laboriosam maiores
        minima modi non obcaecati odit praesentium quae quam recusandae repudiandae sequi sint tempore ullam voluptas?
    </div>
    <div>Ab cumque eos itaque magnam officiis, quam sint! Architecto autem cupiditate debitis dolores illum
        necessitatibus odit praesentium quod totam unde. Beatae deleniti esse ex fugiat, libero maxime temporibus vitae
        voluptatum.
    </div>
    <div>Asperiores deleniti dignissimos, facilis hic magni minima molestias nesciunt officiis veritatis. Beatae est
        illum incidunt inventore iste maiores nihil omnis possimus quasi sint suscipit, vel vitae voluptas voluptate
        voluptatem voluptatum.
    </div>
    <div>Error neque numquam provident. Alias aliquam aspernatur at beatae cumque eius eum explicabo ipsa laboriosam
        minima modi nam, nemo nihil optio quaerat, quasi quis quod rem reprehenderit rerum similique totam!
    </div>
    <div>Adipisci architecto aspernatur, aut autem distinctio dolor dolore excepturi ipsa itaque iure maxime minima nemo
        nobis officia omnis reiciendis rem saepe sapiente sed soluta tempora temporibus ullam veritatis voluptas
        voluptates?
    </div>
    <div>Accusantium blanditiis nostrum odio possimus? Ad animi architecto assumenda at autem consectetur deserunt, esse
        ex, expedita hic illum in maiores molestias natus nihil quia, ratione soluta tenetur voluptatem voluptatum!
        Unde!
    </div>
    <div>Adipisci consectetur deleniti dicta ea fuga, natus nostrum pariatur quas quasi tempore, velit voluptatem
        voluptatibus. A assumenda delectus dicta ea, explicabo id nulla odit officia optio porro quibusdam reiciendis
        voluptas?
    </div>
    <div>Ad animi at beatae consequatur dolorem doloribus earum eum explicabo facere, laudantium molestias nesciunt
        nihil non optio perferendis quas quibusdam quisquam sapiente sint sunt suscipit tempore tenetur ullam vel vero.
    </div>
    <div>Dicta, doloremque nisi. Aliquam cumque ducimus eaque eos error incidunt, odit repellendus sunt vitae voluptas.
        At impedit incidunt iusto magni non quis quo sit sunt. Adipisci doloribus, unde. Exercitationem, nesciunt!
    </div>
    <div>Adipisci architecto exercitationem itaque nesciunt ut! Ab accusamus adipisci aut blanditiis cum dignissimos
        eligendi eum expedita, in laborum modi natus nesciunt, nihil nobis, officia perferendis praesentium recusandae
        rem similique voluptas!
    </div>
    <div>Illum impedit maxime neque nulla perferendis quis repellendus soluta totam. Aliquid aperiam commodi labore
        natus odit optio. Commodi dolorum, ex hic illum inventore ipsum itaque iusto quaerat qui, ratione unde.
    </div>
    <div>Ad blanditiis ex facere iusto mollitia nisi qui quia tempora. Commodi consectetur ducimus esse labore
        laudantium mollitia nulla optio soluta. Alias deserunt dolore hic iure molestiae, natus nobis. Dignissimos, eos.
    </div>
    <div>Aliquam aspernatur assumenda atque commodi cum, cumque deleniti deserunt dolor ducimus eius eligendi ex harum
        hic iste iusto labore maiores minus nihil nostrum nulla quasi reprehenderit, sequi sit tempore voluptatem.
    </div>
    <div>Animi aperiam cumque debitis eius eum, eveniet hic illo maxime quaerat quis repellat sequi soluta totam?
        Consectetur dignissimos dolores eligendi enim illo, impedit, provident quasi ratione sapiente sed temporibus
        tenetur.
    </div>
    <div>Aliquid amet asperiores at blanditiis deleniti dicta doloremque dolores et, excepturi ipsam laborum libero
        minima nam nesciunt nulla officia omnis porro quae repellendus reprehenderit similique ullam veniam vero, vitae
        voluptatem.
    </div>
    <div>Adipisci animi aspernatur atque in libero minus ratione reiciendis saepe. Aliquid amet at autem eligendi enim
        error et ex id laborum, molestiae molestias nam, nulla quaerat quod, ratione recusandae voluptates.
    </div>
    <div>Deserunt, dolorum facilis iure nostrum quos repudiandae sunt ut! Dolorum est hic magnam nulla totam veniam?
        Distinctio doloribus in laboriosam qui quis sed temporibus voluptate? Consectetur delectus praesentium qui sed!
    </div>
    <div>Nemo neque quod reiciendis repellendus similique temporibus ullam. A, adipisci animi aut beatae blanditiis
        consequuntur eaque error est explicabo id ipsum maiores odio quasi quidem quisquam repellendus totam velit vero?
    </div>
    <div>Aut cumque distinctio doloremque doloribus eius et eveniet ex iste minima nam numquam odit officia pariatur
        quibusdam repellat reprehenderit saepe sed sequi suscipit tempora temporibus ullam ut velit voluptatem,
        voluptatibus.
    </div>
    <div>Ab debitis delectus dolorum eos eveniet modi natus provident quam quisquam recusandae. Ab, rem tempora.
        Dignissimos eos esse ipsum laboriosam laborum, minima, natus quae quo repellat reprehenderit, sed sint
        temporibus?
    </div>
    <div>Itaque minus reprehenderit voluptatibus. Accusamus atque dolorem itaque minima repudiandae vero voluptate.
        Architecto consectetur deserunt esse, est id minima modi nemo nesciunt nisi perferendis possimus quis
        repellendus tempore voluptas voluptatum.
    </div>
    <div>Consectetur corporis culpa cumque dicta distinctio doloribus ducimus hic incidunt, ipsa, nam, suscipit
        voluptate? Alias aperiam, blanditiis culpa deleniti ducimus eos officia officiis pariatur reiciendis, rerum
        sapiente sequi, soluta totam.
    </div>
    <div>Accusantium aperiam dignissimos dolore ducimus eaque et ex expedita explicabo harum nesciunt odit porro quasi
        quod repellat soluta, tempore, tenetur voluptates. Expedita facilis libero minima optio quos reprehenderit sequi
        sunt.
    </div>
    <div>Accusamus aut cumque dolor dolorem eos excepturi facere impedit libero, nam nihil, numquam qui quia quidem
        recusandae, repellendus sunt tempore. At consequatur dignissimos earum ipsa quam sint sit vel, voluptatem.
    </div>
    <div>Aut corporis cupiditate et iure laborum necessitatibus odio provident tempore totam voluptatum! Accusantium ad
        amet assumenda commodi delectus enim eum fuga ipsa, numquam odit omnis, placeat quas tempore tenetur ullam?
    </div>
    <div>Animi cum facilis illo necessitatibus nihil placeat quo similique ullam! Aliquam aliquid corporis
        exercitationem inventore iure minima molestias necessitatibus, quod repellendus saepe! Ab dolor, error facere
        incidunt libero molestiae sunt!
    </div>
    <div>Adipisci architecto consequatur deserunt doloremque dolorum ducimus ea earum eveniet explicabo, ipsum maiores
        minima molestias quaerat quia repudiandae sapiente sit voluptatem. Ad delectus fuga iste laborum laudantium
        praesentium quaerat, quia?
    </div>
    <div>A aperiam dicta ea, enim id illum, ipsum itaque odio officia provident sint unde ut. Animi asperiores nam
        nostrum odit quam, quos saepe vel voluptate. Dolorum maxime mollitia non nulla.
    </div>
</div>

</body>
</html>